<template>
  <div class="inspect-manage-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <div>
            <el-input v-model="searchKeyword" placeholder="搜索检验编号/商品名称" size="small"
              style="width: 220px; margin-right: 10px" @input="filterTable" />
            <el-select v-model="filterType" placeholder="筛选检验类型" size="small" clearable
              style="width: 180px; margin-right: 10px" @change="filterTable">
              <el-option label="过程检验" value="过程检验" />
              <el-option label="出货检验" value="出货检验" />
            </el-select>
            <el-select v-model="filterResult" placeholder="筛选检验结果" size="small" clearable
              style="width: 160px; margin-right: 10px" @change="filterTable">
              <el-option label="合格" value="合格" />
              <el-option label="不合格" value="不合格" />
            </el-select>
            <el-button type="primary" icon="Plus" @click="openDialog">新增检验记录</el-button>
            <el-button icon="Download" @click="exportTable">导出</el-button>
          </div>
        </div>
      </template>

      <el-table :data="filteredData" border>
        <el-table-column prop="inspectId" label="检验编号" />
        <el-table-column prop="inspectType" label="检验类型" />
        <el-table-column prop="productName" label="商品名称" />
        <el-table-column prop="productCode" label="商品编码" />
        <el-table-column prop="inspectDate" label="检验日期" />
        <el-table-column label="结果">
          <template #default="scope">
            <el-switch v-model="scope.row.result" active-value="合格" inactive-value="不合格"
              @change="toggleResult(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" />
        <el-table-column label="操作" width="140">
          <template #default="scope">
            <el-button size="small" @click="editRow(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="deleteRow(scope.row.inspectId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog v-model="dialogVisible" title="检验记录" width="600px">
      <el-form :model="form" label-width="100px">
        <el-form-item label="检验编号">
          <el-input v-model="form.inspectId" />
        </el-form-item>
        <el-form-item label="检验类型">
          <el-select v-model="form.inspectType" placeholder="请选择">
            <el-option label="过程检验" value="过程检验" />
            <el-option label="出货检验" value="出货检验" />
          </el-select>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="form.productName" />
        </el-form-item>
        <el-form-item label="商品编码">
          <el-input v-model="form.productCode" />
        </el-form-item>
        <el-form-item label="检验日期">
          <el-date-picker v-model="form.inspectDate" type="date" style="width: 100%" />
        </el-form-item>
        <el-form-item label="检验结果">
          <el-select v-model="form.result" placeholder="请选择">
            <el-option label="合格" value="合格" />
            <el-option label="不合格" value="不合格" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveForm">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const searchKeyword = ref('')
const filterType = ref('')
const filterResult = ref('')
const dialogVisible = ref(false)

interface Inspect {
  inspectId: string
  inspectType: string
  productName: string
  productCode: string
  inspectDate: string
  result: '合格' | '不合格'
  remark: string
}

const rawData = ref<Inspect[]>([
  {
    inspectId: 'INSP-001', inspectType: '过程检验', productName: '建筑钢材', productCode: 'JG-123',
    inspectDate: '2024-05-01', result: '合格', remark: '合格但需复检'
  },
  {
    inspectId: 'INSP-002', inspectType: '出货检验', productName: '电动工具', productCode: 'DT-456',
    inspectDate: '2024-05-02', result: '不合格', remark: '外包装破损'
  },
  {
    inspectId: 'INSP-003', inspectType: '出货检验', productName: '照明设备', productCode: 'ZM-951',
    inspectDate: '2024-05-01', result: '不合格', remark: '外包装破损'
  },
  {
    inspectId: 'INSP-004', inspectType: '出货检验', productName: '电动工具', productCode: 'DT-547',
    inspectDate: '2024-05-02', result: '不合格', remark: '批次不合格'
  },
  {
    inspectId: 'INSP-005', inspectType: '过程检验', productName: '照明设备', productCode: 'ZM-787',
    inspectDate: '2024-05-03', result: '合格', remark: ''
  },
  {
    inspectId: 'INSP-006', inspectType: '出货检验', productName: '涂料油漆', productCode: 'TL-414',
    inspectDate: '2024-05-04', result: '不合格', remark: '批次不合格'
  },
  {
    inspectId: 'INSP-007', inspectType: '出货检验', productName: '涂料油漆', productCode: 'TL-973',
    inspectDate: '2024-05-05', result: '不合格', remark: '批次不合格'
  },
  {
    inspectId: 'INSP-008', inspectType: '过程检验', productName: '涂料油漆', productCode: 'TL-833',
    inspectDate: '2024-05-06', result: '不合格', remark: '合格但需复检'
  },
  {
    inspectId: 'INSP-009', inspectType: '出货检验', productName: '管件配套', productCode: 'PJ-252',
    inspectDate: '2024-05-07', result: '合格', remark: '合格但需复检'
  },
  {
    inspectId: 'INSP-010', inspectType: '过程检验', productName: '照明设备', productCode: 'ZM-579',
    inspectDate: '2024-05-08', result: '不合格', remark: '批次不合格'
  },
  {
    inspectId: 'INSP-011', inspectType: '出货检验', productName: '照明设备', productCode: 'ZM-862',
    inspectDate: '2024-05-09', result: '不合格', remark: '批次不合格'
  },
  {
    inspectId: 'INSP-012', inspectType: '出货检验', productName: '管件配套', productCode: 'PJ-339',
    inspectDate: '2024-05-10', result: '合格', remark: '合格但需复检'
  },
  {
    inspectId: 'INSP-013', inspectType: '出货检验', productName: '管件配套', productCode: 'PJ-754',
    inspectDate: '2024-05-11', result: '合格', remark: '合格但需复检'
  },
  {
    inspectId: 'INSP-014', inspectType: '过程检验', productName: '照明设备', productCode: 'ZM-771',
    inspectDate: '2024-05-12', result: '不合格', remark: '外包装破损'
  },
  {
    inspectId: 'INSP-015', inspectType: '出货检验', productName: '照明设备', productCode: 'ZM-108',
    inspectDate: '2024-05-13', result: '不合格', remark: '批次不合格'
  },
  {
    inspectId: 'INSP-016', inspectType: '出货检验', productName: '照明设备', productCode: 'ZM-437',
    inspectDate: '2024-05-14', result: '不合格', remark: '批次不合格'
  },
  {
    inspectId: 'INSP-017', inspectType: '出货检验', productName: '电动工具', productCode: 'DT-902',
    inspectDate: '2024-05-15', result: '合格', remark: '合格但需复检'
  }
])

const filteredData = ref([...rawData.value])

const form = ref<Inspect>({
  inspectId: '',
  inspectType: '过程检验',
  productName: '',
  productCode: '',
  inspectDate: '',
  result: '合格',
  remark: ''
})

function openDialog() {
  form.value = {
    inspectId: '',
    inspectType: '过程检验',
    productName: '',
    productCode: '',
    inspectDate: '',
    result: '合格',
    remark: ''
  }
  dialogVisible.value = true
}

function editRow(row: Inspect) {
  form.value = { ...row }
  dialogVisible.value = true
}

function saveForm() {
  const index = rawData.value.findIndex(item => item.inspectId === form.value.inspectId)
  if (index > -1) {
    rawData.value[index] = { ...form.value }
  } else {
    rawData.value.push({ ...form.value })
  }
  filterTable()
  dialogVisible.value = false
}

function deleteRow(inspectId: string) {
  rawData.value = rawData.value.filter(item => item.inspectId !== inspectId)
  filterTable()
}

function toggleResult(row: Inspect) {
  row.result = row.result === '合格' ? '不合格' : '合格'
  filterTable()
}

function filterTable() {
  const keyword = searchKeyword.value.toLowerCase()
  filteredData.value = rawData.value.filter(item =>
    item.inspectId.toLowerCase().includes(keyword) ||
    item.productName.toLowerCase().includes(keyword)
  ).filter(item => {
    const matchType = filterType.value ? item.inspectType === filterType.value : true
    const matchResult = filterResult.value ? item.result === filterResult.value : true
    return matchType && matchResult
  })
}

function exportTable() {
  const headers = ['检验编号', '检验类型', '商品名称', '商品编码', '检验日期', '结果', '备注']
  const keys = ['inspectId', 'inspectType', 'productName', 'productCode', 'inspectDate', 'result', 'remark']
  const csv = [
    headers.join(','),
    ...filteredData.value.map(row => keys.map(k => row[k as keyof Inspect]).join(','))
  ].join('\n')

  const blob = new Blob([csv.replace(/\\\\n/g, '\\n')], { type: 'text/csv;charset=utf-8;' })
  const link = document.createElement('a')
  link.href = URL.createObjectURL(blob)
  link.download = '检验记录.csv'
  link.click()
}
</script>

<style scoped>
.inspect-manage-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>